<template>
	<view class="window-main" v-if="showMemberWindow">
		<view class="member-window">
			<image class="member-bg" src="../static/common/bg_member_window.png"></image>
			<image class="title" src="../static/common/ic_member_title.png"></image>
			<text class="sub-title">享受的特权</text>
			
			<view class="column-container-row-center" style="width: 100%;z-index: 110;">
				<image class="icon" src="../static/common/ic_icon_member.png"></image>
				<text class="font-333-32" style="font-weight: 600;">比非会员每单多返2元</text>
				<image class="warm-hint" src="../static/common/ic_warm_hint.png"></image>
				<text class="content">会员权益只对购买后的抢单生效，购买前抢的订单需放弃重抢。虚拟商品，一经售出，概不退款。</text>
				<view class="btn-box">
					<text class="month-btn" @click="gotoBuyMember">购买月票(3.9元)</text>
					<text class="three-month-btn" @click="gotoBuyMember">购买季票(9.9元)</text>
				</view>
			</view>
			
		</view>
		<image class="close-window" src="../static/common/ic_close_window.png" @click="showMemberWindow = false"></image>
	</view>
</template>

<script>
	export default {
		name:"MemberWindow",
		data() {
			return {
				showMemberWindow:false
			};
		},
		
		methods:{
			gotoBuyMember(){
				uni.navigateTo({
					url:'/pages/mine/member'
				})
			}
		}
	}
</script>

<style lang="scss">
	.member-window{
		display: flex;
		flex-direction: column;
		width: 602rpx;
		height: 759rpx;
		margin-bottom: 40rpx;
		position: relative;
		
		.member-bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
		
		.title{
			margin-top: 43rpx;
			margin-left: 61rpx;
			width: 206rpx;
			height: 51rpx;
			z-index: 110;
		}
		
		.sub-title{
			color: #F9F5D9;
			font-size: 40rpx;
			margin-left: 61rpx;
			z-index: 110;
		}
		
		.icon{
			width: 92rpx;
			height: 92rpx;
			margin-bottom: 13rpx;
			margin-top: 46rpx;
		}
		
		.warm-hint{
			width: 514rpx;
			height: 39rpx;
			margin-top: 42rpx;
			margin-bottom: 20rpx;
		}
		
		.content{
			color: #FF621F;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 39rpx;
			margin: 0rpx 44rpx;
			text-align: center;
		}
		
		.btn-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 54rpx);
			margin-top: 44rpx;
			
			.month-btn{
				flex-grow: 1;
				height: 88rpx;
				background: linear-gradient(270deg, #FFEAD7 0%, #FFF8F4 100%);
				border: #C5825D solid 1rpx;
				border-radius: 44rpx;
				margin: 0rpx 17rpx;
				color: #C85C20;
				font-size: 28rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: 600;
			}
			
			.three-month-btn{
				flex-grow: 1;
				height: 88rpx;
				background: linear-gradient(270deg, #FF4646 0%, #FF9E68 100%);
				border-radius: 44rpx;
				margin: 0rpx 17rpx;
				color: white;
				font-size: 28rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: 600;
			}
			
		}
	}
	
	.close-window{
		width: 76rpx;
		height: 76rpx;
	}
	
</style>